<template>
    <div>
        <div class="search-title">
            <el-form ref="formName" :model="ruleForm" class="form-inline" size="small">
                <el-form-item label="坐席工号" prop="caseNumber">
                    <el-input v-model="ruleForm.userName" placeholder="请输入坐席工号" clearable></el-input>
                </el-form-item>
                <el-form-item label="开始日期">
                    <el-date-picker v-model="ruleForm.startDate" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker v-model="ruleForm.endDate" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="二级机构" v-if="isManager">
                    <el-select v-model="ruleForm.twoOrganId" placeholder="二级机构" disabled>
                        <el-option class="my-select-option" v-for="(item, i) in twoOrganlist" :key="i + 'type'"
                            :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级机构" v-if="isManager">
                    <el-select v-model="ruleForm.threeOrganId" placeholder="三级机构" @change="threeChange">
                        <el-option class="my-select-option" v-for="(item, i) in threeOrganlist" :key="i + 'type'"
                            :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="四级机构" v-if="isManager">
                    <el-select v-model="ruleForm.fourOrganId" placeholder="四级机构"
                        :disabled="ruleForm.dimensionality === '3'">
                        <el-option class="my-select-option" v-for="(item, i) in fourOrganlist" :key="i + 'type'"
                            :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="统计维度">
                    <el-radio-group v-model="ruleForm.dimensionality">
                        <el-radio :label="'2'" v-if="userInfo.userType === '5'">三级机构</el-radio>
                        <el-radio :label="'3'" v-if="isManager">三级机构</el-radio>
                        <el-radio :label="'4'" v-if="isManager">四级机构</el-radio>
                        <el-radio :label="'1'" v-if="!isManager">所在机构</el-radio>
                        <el-radio :label="'0'">人员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                </el-form-item>
                <el-form-item>
                </el-form-item>
            </el-form>
        </div>
        <div class="sear-btn">
            <el-button type="primary" round plain size="small" @click="resetForm()">重置</el-button>
            <el-button type="primary" round size="small" @click="staticCaseList()">搜索</el-button>
        </div>
        <div class="down-btn">
            <button @click="downloadExcel()">数据导出</button>
        </div>
        <el-table :data="tableData" :height="tableHeight" style="width: 100%;" v-loading="tableLoading">
            <el-table-column prop="organName" label="机构" header-align="center" align="center">
            </el-table-column>
            <el-table-column v-if="ruleForm.dimensionality === '0'" prop="name" label="坐席用户" width="100"
                header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="taskNum" label="任务量" width="120" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="average" label="平均任务量" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="waitTaskNum" label="未处理任务量" width="100" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="finishTaskNum" label="已完成任务量" width="120" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="zdTaskNum" label="系统分配任务量" width="100" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="zpTaskNum" label="组长指派任务量" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="appTaskNum" label="修理厂指派任务量" width="100" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="totalWaitTaskNum" label="累计未处理任务量" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="jyhb" label="积压环比" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="totalTime" label="定损总时长" width="100" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="avgTime" label="定损平均时长" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="pushRepair" label="一调推修率" header-align="center" align="center">
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="ruleForm.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="ruleForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { casefetchStatistics, casefetchStatisticsExport } from '@/api/case'
import { getNewOrganList } from '@/api/newRules'

export default {
    data() {
        return {
            tableLoading: false,
            twoOrganlist: [],
            threeOrganlist: [{ name: "全部", id: "" }],
            fourOrganlist: [{ name: "全部", id: "" }],
            tableData: [],
            total: 0,
            tableHeight: window.innerHeight - 420,
            ruleForm: {
                twoOrganId: 'c5ff889d7c8d412997b161a34a549fb0',
                threeOrganId: '',
                fourOrganId: '',
                dimensionality: '0',
                pageSize: 10,
                currentPage: 1,
                userName: '',
                isManager: '1',
                startDate: this.$dayjs().format('YYYY-MM-DD'),
                endDate: this.$dayjs().format('YYYY-MM-DD')
            }
        }
    },
    created() {
        this.getNewOrganList('two')
        this.staticCaseList()
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        }),
        isManager() {
            const type = this.userInfo.userType
            if (type == '5' || type == '7' || type == '8') {
                return true
            } else {
                return false
            }
        }
    },
    methods: {
        staticCaseList() {
            this.tableLoading = true
            this.ruleForm.pageCount = this.ruleForm.pageSize.toString()
            this.ruleForm.pageNum = this.ruleForm.currentPage.toString()
            casefetchStatistics(this.ruleForm).then(res => {
                this.tableLoading = false
                this.tableData = res.list
            })
        },
        downloadExcel() {
            const loading = this.$loading({
                lock: true,
                text: '正在生成中，请稍后',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            casefetchStatisticsExport(this.ruleForm).then(res => {
                loading.close()
                let contentTypeHeader = res.headers["content-type"];
                let extractedFileName = "download.xls";
                if (contentTypeHeader) {
                    const fileNameMatch = contentTypeHeader.match(/filename=([^;]*)/);
                    if (fileNameMatch && fileNameMatch.length > 1) {
                        extractedFileName = decodeURI(fileNameMatch[1]);
                    }
                }
                const blob = new Blob([res.data], {
                    type: "application/vnd.ms-excel;",
                });
                const href = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.download = extractedFileName
                link.href = href
                link.click();
                window.URL.revokeObjectURL(link.href);
            }).catch(() => {
                loading.close()
            })
        },
        // 获取机构
        getNewOrganList(type, id) {
            getNewOrganList({ organId: id }).then(res => {
                switch (type) {
                    case 'two':
                        this.twoOrganlist = res
                        this.getNewOrganList('three', res[0].id)
                        break;
                    case 'three':
                        this.threeOrganlist = [{ name: "全部", id: "" }].concat(res)
                        break;
                    case 'four':
                        this.fourOrganlist = [{ name: "全部", id: "" }].concat(res)
                        break;
                }

            })
        },
        threeChange(data) {
            console.log(data)
            if (data) {
                this.getNewOrganList('four', data)
            } else {
                this.ruleForm.fourOrganId = ''
                this.fourOrganlist = [{ name: "全部", id: "" }]
            }
        },
        resetForm() {
            this.ruleForm = {
                twoOrganId: 'c5ff889d7c8d412997b161a34a549fb0',
                threeOrganId: '',
                fourOrganId: '',
                dimensionality: '0',
                pageSize: 10,
                currentPage: 1,
                userName: '',
                startDate: this.$dayjs().format('YYYY-MM-DD'),
                endDate: this.$dayjs().format('YYYY-MM-DD')
            }
        },
        handleSizeChange(val) {
            this.ruleForm.pageSize = val
            this.staticCaseList()
        },
        handleCurrentChange(val) {
            this.ruleForm.currentPage = val
            this.staticCaseList()
        }
    }
}
</script>
<style lang='scss' scoped>
.form-inline {
    display: flex;
    flex-wrap: wrap;
}

.form-inline .el-form-item {
    width: calc(100% / 3);
    margin: 0 auto;
    padding: 6px 8px;
}

::v-deep .el-radio {
    margin-right: 6px;

    .el-radio__label {
        padding-left: 6px
    }
}

::v-deep .form-inline .el-form-item .el-form-item__label {
    margin-left: 5%;
}

.form-inline .el-form-item .el-input,
.form-inline .el-form-item .el-select {
    width: 65%;
}

.sear-btn,
.down-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sear-btn .el-button {
    padding: 8px 35px;
    margin: 5px 40px 0 0;
}

.down-btn {
    justify-content: flex-end;
}

.down-btn button {
    height: 28px;
    line-height: 28px;
    background: none;
    border: 0;
    border-radius: 16px;
    outline: none;
    margin: 20px 20px 10px 6px;
    font-size: 14px;
    color: #409EFF;
}

.el-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
}

::v-deep .el-table tbody td .cell:empty::after {
    content: '— —' !important;
}
</style>
